import React, { Component, ComponentClass } from 'react';
import {connect} from 'react-redux'
import { AtIcon} from 'taro-ui'
import Taro from '@tarojs/taro';
import {View} from '@tarojs/components'
import {CityLocation, OrderItem, DistributorOrder} from '../../utils/server.interface'
import {GET_ORDER_LIST} from '../../constants/api'
import {vcmonitor} from "../../utils/tools";
import {h5Wx} from "../../utils/h5.service";
import {newHttp} from "../../utils/request";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {lxH5Wx} from "../../utils/lx.h5.service";
import './list.scss'

type PageStateProps = {
  location: CityLocation
}
type PageDispatchProps = {}
type PageOwnProps = {}
type PageState = {
  tabIndex: number
  loadMoreStatus: "more" | "loading" | "noMore"
  orderList: DistributorOrder[]
  searchKey: string
  searchBarTop: number
  shopList: any
  shopType: boolean
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface List {
  props: IProps
}

@connect(({location}) => ({
  location
}), (dispatch) => ({}))


class Order extends Component {
  state: PageState = {
    tabIndex: 0,
    loadMoreStatus: 'loading',
    orderList: [],
    searchKey: '',
    searchBarTop: 0,
    shopList: [],
    shopType: false
  }
  page = 1

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: 'loading'})
      this.page++
      const orderList = await this.getData(this.page)
      const old = this.state.orderList
      if (orderList) {
        this.setState({orderList: [...old, ...orderList]})
      }
    }
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    if (Taro.getCurrentInstance().router.params.type === 'ali') {
      this.setState({shopType: true})
    }
    const shopList = Taro.getStorageSync('localShopList')
    this.setState({shopList})
  }

  async componentDidShow() {
    vcmonitor(this)
    const list = await this.getData(1)
    this.setState({orderList: list})
  }

  async getData(page) {
    const orderList = await newHttp.catchGet<OrderItem[]>(GET_ORDER_LIST, {
      pageNumber: page,
      searchKeywords: this.state.searchKey,
      orderMeal: 1
    })
    if (orderList && orderList.length === 10) {
      this.setState({loadMoreStatus: 'more'})
    } else {
      this.setState({loadMoreStatus: 'noMore'})
    }
    return orderList
  }

  async navigateOut(_latitude, _longitude,address = '', name='') {
    lxH5Wx.navigation(Number(_latitude), Number(_longitude), address, name)
  }
  makePhone(value) {
    try{
      Taro.makePhoneCall({
        phoneNumber: value
      })
    } catch (e) {
      Taro.showToast({ title: '拨打电话失败', icon: 'none'})
    }
  }
  render() {
    const {shopList, shopType} = this.state
    return (
      <View className='meals-list-root'>
        <GzhAuth />
        {!!shopList && shopList.map((item, i) =>
          <View key={i}  className='shop-root'>
            <View onClick={this.navigateOut.bind(this, shopType ? item.location.latitude : item.latitude, shopType ? item.location.longitude : item.longitude, shopType ? item.location.address : item.address, item.name)} className='title'>
              {item.name}
            </View>
            <View className='add'>
              <View onClick={this.navigateOut.bind(this, shopType ? item.location.latitude : item.latitude, shopType ? item.location.longitude : item.longitude, shopType ? item.location.address : item.address, item.name)}
                style='margin-right:20px'
              >
                <View style='margin-right:5px;width: fit-content;display: inline-block;'>
                  <AtIcon  value='map-pin' size='16' color='#000' ></AtIcon>
                </View>
                {shopType ? item.location.address : item.address}
              </View>
              {process.env.TARO_ENV === 'weapp'&& <View><AtIcon onClick={this.makePhone.bind(this,shopType ? item.mobiles : item.phoneNumber)} value='phone' size='22' color='#000'></AtIcon></View>}
              {process.env.TARO_ENV === 'h5'&&<a  href={`tel:${shopType ? item.mobiles : item.phoneNumber}`}>
                <AtIcon  value='phone' size='22' color='#000'></AtIcon>
              </a>}
            </View>
          </View>
        )}

        {/*{(!orderList && loadMoreStatus!='loading') && <View className="listNull">*/}
        {/*  <Image src={`${RESOURCE_URL}/resources/images/shopnull.png`} mode={"widthFix"}></Image>*/}
        {/*  <View className='text'>没有任何套餐包哦~~</View>*/}
        {/*</View>}*/}
      </View>
    )
  }
}

export default Order as ComponentClass<PageOwnProps, PageState>
